<template>
	<view class="tools-content">
		<u-toast ref="uToast"></u-toast>
		<view class="tool-tab">
			<u-tabs
				:list="toolTitleList"
				lineWidth="35"
				@change="tabChange"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize: '32rpx'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)',
					fontSize: '32rpx'
				}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"
			>
			</u-tabs>
		</view>
		<view class="tools" v-if="current==1">
			<view class="t-title">机构查询</view>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in instList" :key="listIndex">
					<u-icon :customStyle="{paddingTop:0+'rpx'}" :name="listItem.name" :size="40">
					</u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="tools" v-if="current==0">
			<view class="t-title">计算工具</view>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="toolClick">
					<u-icon :customStyle="{paddingTop:40+'rpx'}" :name="listItem.name" :size="45">
					</u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeBgColor: 'url(/static/images/huxing.png)',
				current: 0,
				toolTitleList: [{
					name: '计算工具'
				}, {
					name: '机构查询',
				}],
				instList: [{
					name: '/static/images/fayuan.png',
					title: '法院'
				}, {
					name: '/static/images/jianchayuan.png',
					title: '检察院'
				}, {
					name: '/static/images/jingcha.png',
					title: '公安局'
				}, {
					name: '/static/images/gongzheng.png',
					title: '公证处'
				}, {
					name: '/static/images/jiaojing.png',
					title: '交警队'
				}, {
					name: '/static/images/jianding.png',
					title: '司法鉴定机构'
				}, {
					name: '/static/images/kanshou.png',
					title: '看守所'
				}, {
					name: '/static/images/jianyu.png',
					title: '监狱'
				}, {
					name: '/static/images/laodong.png',
					title: '劳动仲裁'
				}, {
					name: '/static/images/zhongcai.png',
					title: '仲裁委员会'
				}, {
					name: '/static/images/fangchan.png',
					title: '房产交易中心'
				}, {
					name: '/static/images/gongshangju.png',
					title: '工商局'
				}, {
					name: '/static/images/guoshui.png',
					title: '国税局'
				}, {
					name: '/static/images/dishui.png',
					title: '地税局'
				}, {
					name: '/static/images/gongjijin.png',
					title: '公积金管理中心'
				}, {
					name: '/static/images/shebao.png',
					title: '社保局'
				}],
				list: [{
					name: '/static/images/lvshifei.png',
					title: '律师费'
				}, {
					name: '/static/images/susongfei.png',
					title: '诉讼费'
				}, {
					name: '/static/images/riqi.png',
					title: '日期计算'
				}, {
					name: '/static/images/gongshang.png',
					title: '工伤赔偿'
				}, {
					name: '/static/images/fangdai.png',
					title: '房屋还贷'
				}, {
					name: '/static/images/xinzi.png',
					title: '薪资计算'
				}],
			}
		},
		methods: {
			tabChange (item) {
				this.current = item.index;
			},
			toolClick(num) {
				if (num == 0) {
					uni.navigateTo({
						url: "/pages/tools/lawerFees"
					})
				}
				if (num == 1) {
					uni.navigateTo({
						url: "/pages/tools/legCost"
					})
				}
				if (num == 2) {
					uni.navigateTo({
						url: "/pages/tools/dateCal"
					})
				}
				if (num == 3 || num == 4 || num == 5) {
					this.$refs.uToast.show({
						message: '你别点了，没发布！',
						type: 'default',
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tools-content {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding-bottom: 30rpx;
	}
	.tool-tab {
		width: 100%;
		padding: 80rpx 30rpx;
		align-items: flex-end;
		height: 200rpx;
		text-align: center;
		color: #b4b7bb;
		font-size: 36rpx;
		background-image: (url());
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: top center;
	}
	.tools {
		width: 100%;
		min-height: 400rpx;
		padding: 30rpx 0%;

		.t-title {
			margin-bottom: 20rpx;
			padding-left: 30rpx;
			font-size: 30rpx;
			color: #1e1f20;
			font-weight: 500;
		}
	}

	.grid-text {
		color: #1e1f20;
		padding: 20rpx 0 20rpx 0rpx;
		box-sizing: border-box;
		font-size: 26rpx;
	}
	
	.tool-tab /deep/ .u-tabs__wrapper__nav__line {
		height: 8rpx!important;
		background: linear-gradient(to right, #1C5AD2, #528bfa)!important;
	}
</style>